<template>
	<view class="" v-if="hackReset">
		<view class="" v-show="judge">
			<view class="end-title">
				<view @tap="change(0)" :class="{ btna: btnnum == 0 }">已完成订单</view>
				<view @tap="change(1)" :class="{ btna: btnnum == 1 }">未完成订单</view>
			</view>
		</view>
		<!-- 已完成订单 -->
		<view class="end-cont" :class="{ dis: btnnum == 0 }">
			<view class="noneOrder" v-if="empty"><image src="../../static/img/order/noneOrder.png" mode=""></image></view>
			<view class="orderFrom" v-for="(item, index) in completedOrder" :key="index" @click="particulars(item.orderCode)">
				<view class="accomplish">
					<image class="img" src="../../static/img/order/car.png" mode=""></image>
					<view class="bus">汽车票</view>
					<!-- 已支付 -->
					<view class="cancel" v-if="item.status === 1">已支付</view>
					<!-- 已打印 -->
					<view class="cancel" v-else-if="item.status === 3">已打印</view>
					<!-- 申请退款中 -->
					<view class="cancel" v-else-if="item.status === 4 || 6 || 7 || 8">退款中</view>
					<!-- 退款成功 -->
					<view class="cancel" v-else-if="item.status === 5 || 9">退款成功</view>
				</view>
				<view class="wires"></view>
				<view class="bigBox">
					<view class="above">
						<view class="departure">{{ item.stationName }}</view>
						<view class="departureTime">{{ item.startTime }}</view>
						<view class="destination">{{ item.targetName }}</view>
					</view>
					<view class="accomplishMiddle">
						<view class="">里程{{ item.miles }}km</view>
						<view class="">
							<view class="lines"><image src="../../static/img/order/line.png" mode=""></image></view>
							<view class="startDate" style="margin-left: 38upx;">{{ item.startDate }}</view>
						</view>
						<view class="">班次:{{ item.busnum }}</view>
					</view>
				</view>
				<view class="belows">
					<view class="passenger">
						<view class="">订单号:{{ item.orderCode }}</view>
					</view>
					<view class="money">￥{{ item.ticketMoney }}</view>
				</view>
				<view class="wires"></view>
				<view class="ticketCode">取票码:{{ item.password }}</view>
			</view>
		</view>
		<!-- 未完成订单 -->
		<view class="end-cont" :class="{ dis: btnnum == 1 }">
			<view class="noneOrder" v-show="unfinished"><image src="../../static/img/order/noneOrder.png" mode=""></image></view>
			<view class="orderFrom" v-for="(item, index) in backlogOrders" :key="index" @click="particulars(item.orderCode)">
				<view class="busTicket">
					<image class="img" src="../../static/img/order/car.png" mode=""></image>
					<view class="bus">汽车票</view>
					<!-- 待支付 -->
					<view class="cancel" v-if="item.status === 0">待支付</view>
					<!-- 已取消 -->
					<view class="cancel" v-else-if="item.status === 2">已取消</view>
				</view>
				<view class="wire"></view>
				<view class="b_Box">
					<view class="above">
						<view class="departure">{{ item.stationName }}</view>
						<view class="departureTime">{{ item.startTime }}</view>
						<view class="destination">{{ item.targetName }}</view>
					</view>
					<view class="accomplishMiddle">
						<view class="">里程{{ item.miles }}km</view>
						<view class="">
							<view class="lines"><image src="../../static/img/order/line.png" mode=""></image></view>
							<view class="startDate" style="margin-left: 38upx;">{{ item.startDate }}</view>
						</view>
						<view class="">班次:{{ item.busnum }}</view>
					</view>
				</view>
				<view class="below">
					<view class="passenger">
						<view class="">订单号:{{ item.orderCode }}</view>
					</view>
					<view class="money">￥{{ item.ticketMoney }}</view>
				</view>
			</view>
			<!-- 加载中 -->
			<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
		</view>
		<!-- 授权 -->
		<authorization @appLogin="getOrders" v-if="authorization"></authorization>
	</view>
</template>

<script>
import authorization from '../views/authorization/authorization.vue';
import httpConfig from '../../static/http/pageConfig.js';
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	components: {
		authorization
	},
	data() {
		return {
			btnnum: 0,
			unfinished: false,
			empty: false,
			backlogOrders: [],
			completedOrder: [],
			active: true,
			judge: false,
			authorization: false,
			hackReset: true
		};
	},
	onLoad(options) {
		var that = this;
		uni.getStorage({
			key: 'token',
			success(e) {
				if (e.data) {
					that.authorization = false;
				}
			},
			fail() {
				that.authorization = true;
			}
		});
		// 页面显示是默认选中第一个
		this.tabCurrentIndex = 0;
	},
	onShow() {
		this.getOrder();
	},
	methods: {
		change(e) {
			this.btnnum = e;
		},
		getOrder() {
			let data = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Order/MyOrders',
					method: 'get',
					data: data
				})
				.then(data => {
					this.judge = true;
					this.active = false;
					if (data.data.result == false) {
						uni.showModal({
							title: '提示',
							content: data.data.msg,
							success: function(res) {
								if (res.confirm) {
								} else if (res.cancel) {
								}
							}
						});
					}
					var arr = data.data.orderInfos;
					var list = [];
					var lists = [];
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].status === 0 || arr[i].status === 2) {
							list.push(arr[i]);
						} else {
							lists.push(arr[i]);
						}
					}
					if (lists === '') {
						this.empty = true;
					}
					if (list === '') {
						this.unfinished = true;
					}
					this.completedOrder = lists;
					this.backlogOrders = list;
				});
		},
		particulars(e) {
			uni.navigateTo({
				url: '../orderDetails/orderDetails?id=' + e
			});
		},
		getOrders(e) {
			if (e == true) {
				this.getOrder();
				this.authorization = false;
				this.judge = true;
			}
		}
	}
};
</script>

<style scoped>
/* 将三个内容view的display设置为none(隐藏) */
.end-title {
	display: flex;
}

.end-title view {
	height: 80upx;
	line-height: 80upx;
	flex-grow: 1;
	text-align: center;
}

.end-cont {
	width: 94%;
	margin: auto;
	display: none;
}

.orderFrom {
	margin-top: 30upx;
}

.btna {
	color: #00a0ff;
	border-bottom: 2px solid #00a0ff;
}

.dis {
	display: block;
}
.img {
	width: 70upx;
	height: 70upx;
	margin: 5upx 20upx 0upx 50upx;
}
.busTicket {
	height: 80upx;
	line-height: 80upx;
	display: flex;
	border-top-right-radius: 15upx;
	border-top-left-radius: 15upx;
	background-color: #01a1ea;
}
.wire {
	width: 100%;
	height: 1upx;
	margin: auto;
	border-bottom: 1upx dashed #01a1ea;
}
.bus {
	color: #ffffff;
	font-weight: bold;
	margin-right: 5upx;
}
.cancel {
	color: #ffffff;
	font-weight: bold;
	margin-left: 45%;
}
.b_Box {
	background-color: #01a1ea;
}
.departureTime {
	font-size: 30upx;
	margin-right: 40rpx;
}
.above {
	display: flex;
	color: #ffffff;
	font-size: 40upx;
	font-weight: bold;
	padding-top: 30upx;
	justify-content: space-around;
}
.goOff {
}
.arrows {
	width: 195upx;
	height: 10upx;
}
.arrows image {
	width: 100%;
	height: 100%;
}
.middle {
	display: flex;
	color: #ffffff;
	font-size: 30upx;
	margin-top: 15upx;
	margin-left: 35upx;
	padding-bottom: 25rpx;
	justify-content: space-around;
}
.accomplishMiddle {
	display: flex;
	color: #ffffff;
	font-size: 26upx;
	margin-top: 15upx;
	margin-left: 35upx;
	padding-bottom: 25rpx;
	justify-content: space-around;
}
.mils {
	margin-top: 24upx;
}
.lines {
	width: 191upx;
	height: 10upx;
	margin-top: -45upx;
}
.lines image {
	width: 100%;
	height: 100%;
}
.startDate {
	margin-top: 24upx;
}
.below {
	display: flex;
	padding-top: 20upx;
	padding-bottom: 20upx;
	background-color: #f8f8f8;
	justify-content: space-around;
	border-bottom-left-radius: 15upx;
	border-bottom-right-radius: 15upx;
	box-shadow: 2upx 2upx 5upx #cccccc;
}
.passenger {
	color: #c8c7cc;
}
.money {
	color: #dd524d;
	font-size: 35upx;
}
/* 已完成订单 */
.accomplish {
	height: 80upx;
	line-height: 80upx;
	display: flex;
	border-top-right-radius: 15upx;
	border-top-left-radius: 15upx;
	background-color: #01a1ea;
}
.bigBox {
	background-color: #01a1ea;
}
.wires {
	width: 100%;
	height: 1upx;
	margin: auto;
	border-bottom: 1upx dashed #01a1ea;
}

.line {
	height: 1upx;
	margin: auto;
	border-bottom: 1upx dashed #ffffff;
}

.belows {
	display: flex;
	padding-top: 20upx;
	padding-bottom: 20upx;
	background-color: #f8f8f8;
	justify-content: space-around;
}
.ticketCode {
	height: 60upx;
	color: #4cd964;
	text-align: center;
	line-height: 60upx;
	background-color: #f8f8f8;
	border-bottom-left-radius: 15upx;
	border-bottom-right-radius: 15upx;
}
</style>
